<template>
	<view>
	
		<view v-if="Object.keys(info).length !== 0">
			<!-- 帖子详情页详细信息 -->
			<common-list :item="info" 
			isdetail
			@Follow="Follow"
			@doSupport="doSupport"
			@doShare="doShare">
				<view>{{info.content}}</view>
				<view>
					<image :key="index" v-for="(item,index) in images" @click="preview(index)" :src="item.url" class="w-100" mode="widthFix"></image>
				</view>
			</common-list>
		</view>
		<divider></divider>
		<view class="p-2 font-md font-weight-bold">
			最新评论 {{comments.length}}
		</view>
		<view id="msg-box" class="px-2">
			
			<view class="uni-comment-list" 
			v-for="(item,index) in comments"
			:key="index">
				<view v-if="item.reply" style="width: 60rpx;"></view>
				<view class="flex w-100"
				:class="item.reply ? 'bg-light rounded p-2' : ''">
					<view class="uni-comment-face"><image :src="item.userpic" style="width: 70rpx;height: 70rpx;"></image></view>
					<view class="uni-comment-body">
						<view class="uni-comment-top">
							<text>{{item.username}}</text>.
						</view>
						<view class="uni-comment-content"
						@click="reply(item.id)">{{item.content}}</view>
						<view class="uni-comment-date">
							<view>{{item.time | times}}</view>
						</view>
					</view>
				</view>
			</view>
			
		</view>
		<!-- 占位 -->
		<view style="height: 100rpx;"></view>
		<bottom-input :focus="focus" @blur="blur" @submit="submit"></bottom-input>
		
		<more-share ref="share"></more-share>
		
	</view>
</template>

<script>
	import commonList from '@/components/common/common-list.vue';
	import bottomInput from '@/components/common/bottom-input.vue';
	import moreShare from '@/components/common/more-share.vue';
	import {getSocialDetail} from "@/network/home.js";
	import {getTopicDate} from "@/network/topic.js";
	import {getFavorRecord,getFollowAdd} from "@/network/follow.js";
	import {getCommentsAdd} from "@/network/comment.js";
	export default {
		components: {
			commonList,
			bottomInput,
			moreShare
		},
		data() {
			return {
				// 当前帖子信息
				info:{},
				images:[],
				comments:[],
				focus:false,
				reply_id:"",
				did:null,
			}
		},
		onLoad(e) {
			// 初始化
			
			this.did = JSON.parse(e.detail)
			if (this.did) {
				this.__init()
				// 监听关注和顶踩
				uni.$on("updateFollowOrSupport",(e)=>{
					switch (e.type){
						case "follow":
						this.Follow(e.data.user_id)
							break;
						case "support":
						this.doSupport(e.data.news_list)
							break;
					}
				})
			}
			// 监听关注和顶踩操作
			
		},
		onUnload() {
			uni.$off('updateFollowOrSupport',(e)=>{})
		},
		computed: {
			imagesList() {
				return this.images.map(item=>item.url) 
			}
		},
		// 监听导航栏事件
		onNavigationBarButtonTap() {
			this.$refs.share.open({
				title: this.info.title,
				shareText: this.info.title,
				href:"http://www.dishaxy.com",
				image: this.info.titlepic
			})
		},
		onBackPress() {
			this.$refs.share.close()
		},
		// #ifndef APP-PLUS
		// 微信小程序分享
		onShareAppMessage(res) {
			return {
			  title: this.info.title,
			  path: '/pages/detail/detail?detail='+JSON.stringify(this.info)
			}
		 },
		// #endif
		methods: {
			__init(){
				if(this.did.status){
					getSocialDetail(this.did.id).then(attr=>{
						let [err,res] = attr
						// 修改标题
						uni.setNavigationBarTitle({
							title:res.data.list.title
						})
						this.info = res.data.list
						this.info.content = ''
						this.comments = res.data.comments
						this.images = res.data.images
					})
				}else{
					getTopicDate(this.did.id).then(attr=>{
						let [err,res] = attr
						// 修改标题
						uni.setNavigationBarTitle({
							title:res.data.list.title
						})
						this.info = res.data.list
						this.info.content = ''
						this.comments = res.data.comments
						this.images = res.data.images
					})
				}
				

			},
		
			// 点击分享
			doShare(){
				console.log("分享")
			},
			// 关注
			Follow(user_id){
				this.info.isFollow = !this.info.isFollow
			},
			// 顶踩操作
			doSupport(e){
				let types = e.type
				// 如果已点过则进行取消操作
				if(this.info.news_list.type===types){
					this.info.news_list[types+'_count']--
					this.info.news_list.type=""
					uni.showToast({title:"取消成功"})
					return
				}
				let msg = types==="support" ? "点赞" : "点踩"
				// 如果没点过取消，且没选中任何功能，则执行
				if(this.info.news_list.type){
					let my_type = this.info.news_list.type
					this.info.news_list[my_type+'_count']--
				}
				// 如果什么都没选执行
				this.info.news_list.type=types
				this.info.news_list[types+'_count']++
				uni.showToast({title:msg+"成功"})
				
			},
			// 预览图片
			preview(index){
				// 预览图片
				uni.previewImage({
					current:index,
					urls:this.imagesList
				});
			},
			// 提交评论
			submit(data){
				this.checkAuth(()=>{
					if(data === ''){
						return uni.showToast({
							title: '评论不能为空',
							icon: 'none'
						});
					}
					uni.showLoading({
						title: '评论中...',
						mask: false
					});
					setTimeout(()=>{
						
						let data_list={
							content:data,
							time: new Date().toISOString(),
							reply:this.reply_id,
							root:"",
						}
						getCommentsAdd(this.info.id,data_list).then(attr=>{
							let [err,res] = attr
							data_list.reply = res.data.reply
							data_list.root = res.data.root
							data_list['id'] = res.data.id
							data_list['userpic'] = this.$store.state.userInfo.avatar
							data_list['username'] = this.$store.state.userInfo.username
							
						})
						this.comments.push(data_list)
						this.info.comment_count +=1	
						uni.$emit("updateFollowOrSupport",{
							type:"comment",
							data:{
								comment:{
									'id':this.did.id,
									'count':this.info.comment_count
								}
							}
						})
						uni.hideLoading();
					},2000)
				})
			},
	
			// 回复评论
			reply(id){
				this.reply_id = id
				this.focus = true
			},
			// 输入框失去焦点
			blur(){
				this.reply_id = ""
				this.focus = false
			}
		},
		filters:{
			times(times){
				return new Date(+new Date(times) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
			}
		}
	}
</script>

<style>

</style>
